<template>
	<view>
		<view class="loading" v-if="loading">
			<u-loading></u-loading>
		</view>
		<block v-else>
			<u-gap></u-gap>
			<swiper :current="current" @change="change" indicator-active-color="#F39A16" indicator-color="#DDDDDD"
			 :indicator-dots="true">
				<swiper-item v-for="(item,index) in cardList" :key="index">
					<view class="swiper-item">
						<u-image mode="widthFix" width="100%" src="https://photo.hiyipin.net/USER/10ee66ac-6d21-4f22-85fa-12f27d39be01.png"></u-image>
						<view class="box">
							<view class="bank-name">
								{{item.bankName}}
							</view>
							<view class="number">{{item.cardText}}</view>
							<view class="order">
								<view class="text">持卡人：{{item.realName}}</view>
								<view class="edit" @click="$u.route('/pages/user/addCard/addCard',{id:item.id})">编辑</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="card-list">
				<view class="item">
					<u-image :src="appletImgUrl+'bank-icon.png'" width="72" height="72"></u-image>
					<view class="info">
						<view class="">{{cardList[current].bankName}}</view>
						<view class="">尾号{{cardList[current].bankId}}</view>
					</view>
					<view class="cancel" @click="show = true">解除绑定</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="info-box">
				<view class="item">
					<view class="">开户行所在地</view>
					<view class="val">{{cardList[current].provinceName || ''}} {{cardList[current].cityName || ''}}
						{{cardList[current].areaName || ''}}</view>
				</view>
				<view class="item">
					<view class="">支行名称</view>
					<view class="val">{{cardList[current].bankAddress}}</view>
				</view>
				<view class="item">
					<view class="">准确的开户行信息，将会加快提现到账速度</view>
				</view>
			</view>
			<!-- <view class="tip">
				*银行卡仅用于APP内提现申请，如需修改进行商户结算银行卡，
				请联系平台客服
			</view> -->
			<view class="safe-area-inset-bottom"></view>
			<view class="btn" @click="$u.route('/pages/user/addCard/addCard')">
				添加银行卡
				<view class="safe-area-inset-bottom"></view>
			</view>
			<u-modal show-cancel-button confirm-color="#FF4D46" v-model="show" @confirm="confirm" content="确认解绑该银行卡吗？"></u-modal>
		</block>
	</view>
</template>

<script>
   import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				cardList: [],
				show: false,
				current: 0,
				imageUrl: this.imageUrl,
				loading: true
			};
		},
		methods: {
			updateData() {
				this.init()
			},
			confirm() {
				this.$u.get('userbankcard/delete/' + this.cardList[this.current].id).then(res => {
					uni.showToast({
						title: '已解绑'
					})
					this.current = 0
					this.init()
				})
			},
			change({
				detail: {
					current
				}
			}) {
				this.current = current
			},
			init(fn = () => {}) {
				this.$u.get('userbankcard/list').then(res => {
					if (res != '') {
						let reg = /^(\d{4})\d+(\d{4})$/
						res.forEach((item, index) => {
							item.cardText = item.bankId.replace(reg, "$1****$2");
							item.bankId = item.bankId.substr(item.bankId.length - 4)
							item.check = this.cardIndex == index ? true : false
						})
						this.cardList = res
						fn()
					} else {
						this.$u.route({
							type: 'back'
						})
					}
				}).catch(error => {
					console.log(error);
				})
			}
		},
		onLoad() {
			this.init(() => {
				this.loading = false
			})
		}
	}
</script>

<style lang="scss">
	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient(90deg, #FF3868, #FC6161);
		color: #FFFFFF;
		font-size: 30rpx;
		border-radius: 40rpx 40rpx 0 0;
	}

	.tip {
		margin: 0 30rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #F39A16;
	}

	.info-box {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 30rpx;
		padding: 0 30rpx;

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E1E1E1;
			display: flex;
			justify-content: space-between;

			view {
				font-size: 28rpx;

				&:last-child {
					flex: 1;
				}

			}

			.val {
				text-align: right;
				margin-left: 30rpx;
			}

			&:last-child {

				border-bottom: none;

				view {
					color: #AAAAAA;
				}
			}
		}
	}

	.card-list {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 30rpx;
		padding: 0 30rpx;
		margin-top: 10rpx;

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E1E1E1;
			display: flex;

			.cancel {
				color: #AAAAAA;
				font-size: 28rpx;
			}

			.info {
				flex: 1;
				margin: 0 20rpx;

				view {
					&:first-child {
						font-size: 28rpx;
					}

					&:last-child {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	swiper {
		height: 360rpx;

		.swiper-item {
			padding: 0 30rpx;
			height: 100%;
			position: relative;

			.box {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding-top: 9%;

				.number {
					color: #FFFFFF;
					font-weight: bold;
					margin-left: 10%;
					font-size: 36rpx;
					margin-top: 40rpx;
				}

				.order {
					margin-left: 10%;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					padding-right: 30rpx;
					align-items: center;

					.edit {
						border-radius: 30rpx 0px 0px 30rpx;
						line-height: 60rpx;
						padding: 0 30rpx;
						color: #FFFFFF;
						background-color: rgba($color: #ffffff, $alpha: .2);
					}

					.text {
						color: #FFFFFF;
					}
				}

				.bank-name {
					font-size: 30rpx;
					margin-left: 25%;
					color: #FFFFFF;
				}
			}
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>
